import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { useSEOConfig, generateHreflangTags, generateStructuredData } from '@/lib/seo';

export default function AboutIntroduction() {
  const { t } = useTranslation();
  const seoConfig = useSEOConfig({
    title: `${t('header.companyIntroduction')} - 豆豆Pay`,
    description: t('seo.pages.aboutIntroduction.description')
  });
  const hreflangTags = generateHreflangTags('/about/introduction');
  const structuredData = generateStructuredData(seoConfig, 'organization');
  
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Helmet>
        {/* Basic Meta Tags */}
        <title>{seoConfig.title}</title>
        <meta name="description" content={seoConfig.description} />
        <meta name="keywords" content={seoConfig.keywords} />

        {/* Canonical URL */}
        <link rel="canonical" href={seoConfig.url} />

        {/* Open Graph / Facebook */}
        <meta property="og:title" content={seoConfig.title} />
        <meta property="og:description" content={seoConfig.description} />
        <meta property="og:image" content={seoConfig.image} />
        <meta property="og:url" content={seoConfig.url} />
        <meta property="og:locale" content={seoConfig.locale} />
        <meta property="og:site_name" content={seoConfig.siteName} />
        <meta property="og:type" content="website" />

        {/* Twitter */}
        <meta name="twitter:title" content={seoConfig.title} />
        <meta name="twitter:description" content={seoConfig.description} />
        <meta name="twitter:image" content={seoConfig.image} />
        <meta name="twitter:card" content="summary_large_image" />

        {/* Hreflang tags for multilingual SEO */}
        {hreflangTags.map((tag, index) => (
          <link key={index} rel={tag.rel} hrefLang={tag.hreflang} href={tag.href} />
        ))}

        {/* Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify(structuredData)}
        </script>
      </Helmet>
      
      <Header />
      
      <main className="flex-grow">
        {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-gray-50 to-gray-100">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
                {t('header.companyIntroduction')}
              </h1>
              <div className="w-20 h-1 bg-blue-500 mx-auto mb-8 rounded-full"></div>
            </motion.div>
          </div>
        </section>
        
        {/* 公司介绍内容 */}
        <section className="py-20 bg-white"> 
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <motion.div 
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: .8 }} 
                viewport={{ once: true }}
              >
                <div className="prose prose-lg max-w-none text-gray-700">
                  <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-6">{t('aboutPages.companyIntroduction.title')}</h2>
                  <p className="mb-6 leading-relaxed">
                    {t('aboutPages.companyIntroduction.description1')}
                  </p>
                  <p className="mb-6 leading-relaxed">
                    {t('aboutPages.companyIntroduction.description2')}
                  </p>
                  <p className="mb-6 leading-relaxed">
                    {t('aboutPages.companyIntroduction.description3')}
                  </p>
                </div>

{/*                 
                <div className="grid grid-cols-2 gap-6 mt-8">
                  <div className="bg-gray-50 p-6 rounded-xl">
                    <h3 className="text-3xl font-bold text-blue-600 mb-2">¥120亿+</h3>
                    <p className="text-gray-700">{t('aboutPages.companyIntroduction.annualTransactionScale')}</p>
                  </div>
                  <div className="bg-gray-50 p-6 rounded-xl">
                    <h3 className="text-3xl font-bold text-blue-600 mb-2">15万+</h3>
                    <p className="text-gray-700">{t('aboutPages.companyIntroduction.enterpriseClients')}</p>
                  </div>
                </div> */}

              </motion.div>
              
              <motion.div 
                initial={{ opacity: .9, scale: .95 }}
                whileInView={{ opacity: 1, scale: .95 }}
                transition={{ duration: 1 }} 
                viewport={{ once: true }}
                className="relative" 
              >
                <div className="rounded-xl overflow-hidden shadow-2xl transform rotate-1 transition-transform duration-700 hover:rotate-0">
                  <img 
                    src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=corporate%20office%20building%2C%20modern%20architecture%2C%20financial%20company&sign=fdfbbb42760376702c6a307e77243433" 
                    alt={t('aboutPages.companyIntroduction.companyBuildingAlt')} 
                    className="w-full h-auto"
                  />
                </div>
                <div className="absolute -bottom-6 -right-6 w-40 h-40 bg-blue-100 rounded-full -z-10"></div>
                <div className="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full -z-10"></div>
              </motion.div>
            </div>
          </div>
        </section>
        
        {/* 发展历程 */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-3xl mx-auto mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{t('aboutPages.companyIntroduction.developmentHistory')}</h2>
              <div className="w-20 h-1 bg-blue-500 mx-auto mb-8 rounded-full"></div>
            </div>
            
            <div className="relative max-w-4xl mx-auto">
              {/* Timeline line */}
              <div className="absolute left-0 md:left-1/2 top-0 bottom-0 w-1 bg-blue-200 transform md:translate-x-px"></div>
              
              {/* Timeline items */}
              <div className="space-y-16 relative">
                {/* 2025 */}
                {/* <motion.div
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: .5 }}
                  viewport={{ once: true }}
                  className="md:flex items-center"
                >
                  <div className="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                    <h3 className="text-xl font-bold text-gray-900 mb-2">{t('aboutPages.companyIntroduction.year2025')}</h3>
                    <p className="text-gray-600">{t('aboutPages.companyIntroduction.year2025Desc')}</p>
                  </div>
                  <div className="md:w-16 flex justify-center relative z-10 md:translate-x-0.5">
                    <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">{t('aboutPages.companyIntroduction.year2025').replace('年', '')}</div>
                  </div>
                  <div className="md:w-1/2 md:pl-12"></div>
                </motion.div> */}
                
                {/* 2023 */}
                <motion.div
                  initial={{ opacity: 0, x: 30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: .5 }}
                  viewport={{ once: true }}
                  className="md:flex items-center"
                >
                  <div className="md:w-1/2 md:pr-12"></div>
                  <div className="md:w-16 flex justify-center relative z-10 md:translate-x-0.5">
                    <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">{t('aboutPages.companyIntroduction.year2025').replace('年', '')}</div>
                  </div>
                  <div className="md:w-1/2 md:pl-12 mb-8 md:mb-0">
                    <h3 className="text-xl font-bold text-gray-900 mb-2">{t('aboutPages.companyIntroduction.year2025')}</h3>
                    <p className="text-gray-600">{t('aboutPages.companyIntroduction.year2025Desc')}</p>
                  </div>
                </motion.div>
                
                {/* 2020 */}
                <motion.div
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: .5 }}
                  viewport={{ once: true }}
                  className="md:flex items-center"
                >
                  <div className="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                    <h3 className="text-xl font-bold text-gray-900 mb-2">{t('aboutPages.companyIntroduction.year2020')}</h3>
                    <p className="text-gray-600">{t('aboutPages.companyIntroduction.year2020Desc')}</p>
                  </div>
                  <div className="md:w-16 flex justify-center relative z-10 md:translate-x-0.5">
                    <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">{t('aboutPages.companyIntroduction.year2020').replace('年', '')}</div>
                  </div>
                  <div className="md:w-1/2 md:pl-12"></div>
                </motion.div>
                
                {/* 2015 */}
                <motion.div
                  initial={{ opacity: 0, x: 30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: .5 }}
                  viewport={{ once: true }}
                  className="md:flex items-center"
                >
                  <div className="md:w-1/2 md:pr-12"></div>
                  <div className="md:w-16 flex justify-center relative z-10 md:translate-x-0.5">
                    <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">{t('aboutPages.companyIntroduction.year2015').replace('年', '')}</div>
                  </div>
                  <div className="md:w-1/2 md:pl-12 mb-8 md:mb-0">
                    <h3 className="text-xl font-bold text-gray-900 mb-2">{t('aboutPages.companyIntroduction.year2015')}</h3>
                    <p className="text-gray-600">{t('aboutPages.companyIntroduction.year2015Desc')}</p>
                  </div>
                </motion.div>
                
                {/* 2010 */}
                <motion.div
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: .5 }}
                  viewport={{ once: true }}
                  className="md:flex items-center"
                >
                  <div className="md:w-1/2 md:pr-12 md:text-right mb-8 md:mb-0">
                    <h3 className="text-xl font-bold text-gray-900 mb-2">{t('aboutPages.companyIntroduction.year2010')}</h3>
                    <p className="text-gray-600">{t('aboutPages.companyIntroduction.year2010Desc')}</p>
                  </div>
                  <div className="md:w-16 flex justify-center relative z-10 md:translate-x-0.5">
                    <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">{t('aboutPages.companyIntroduction.year2010').replace('年', '')}</div>
                  </div>
                  <div className="md:w-1/2 md:pl-12"></div>
                </motion.div>
              </div>
            </div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}